<template>
    <div class="header_content">
        <div class="header_content_left">
            <a-space size="[16, 24]">
                <span v-if="!user" @click="handleLogin">登录 </span>
                <a-popover :visible="user?.card_number"  trigger="hover" placement="" position="bl" v-else>
                    <template #content>
                        <div class="popover-content">
                           <a-space  size="[16, 24]" direction="vertical" fill>
                                <div class="popover-content-header">
                                    <a-space size="[16, 24]">
                                        <div ><span>{{ user.card_number  }}</span></div>
                                        <div><a-button type="primary"  status="danger" shape="round" size="mini" @click="handleGO">更多点数</a-button></div>
                                    </a-space>
                                </div>
                                <div class="popover-content-box">
                                    <h3>当前剩余点数: {{ point }}</h3>
                                </div>
                                <div class="popover-content-footer">
                                    <a @click="handleLogout">退出登录 </a>
                                </div>
                           </a-space>
                        </div>
                    </template>
                    <span>{{ user.card_number }}</span>
                </a-popover>
                <a-badge :count="9" dot :offset="[2, -2]">
                    <a-popover :get-popup-container="body" trigger="hover" placement="" position="bl">
                        <template #content>
                            <div class="popover-content">
                                <ul>
                                    <li  v-for="(item) of noticeList"  :key="item.id">
                                        <span>{{ item.title }}</span>
                                        <span v-html="item.content"></span>
                                    </li>
                                </ul>
                            <!-- <h4>消息中心</h4> -->
                            </div>
                        </template>
                        <icon-notification size="20"/>
                    </a-popover>
                    <!-- <a href="#">消息</a> -->
                </a-badge>
              
                <a href="https://github.com/arco-design" target="_blank" style="color: rgb(78, 89, 105)"><icon-github size="20"/></a>
            </a-space>
        </div>
        <div class="header_content_middle"></div>
        <div class="header_content_right">
            <a-space style="width: 100%" size="[16, 24]">
                <div class="header_icon"><icon-minus @click="handleMini" /></div>
                <div class="header_icon"><icon-desktop  @click="handleFull" /></div>
                <div  class="header_icon"><icon-close  @click="handleClose"/></div>
            </a-space>
        </div>
        <PscgoDialog :visible="showDialog" v-on:update:visible="handleCloseModal" v-on:update:close='handleCloseModal'/>
    </div>
</template>

<script setup>
import {
  IconMinus,
  IconClose,
  IconDesktop,
  IconNotification,
  IconGithub
} from '@arco-design/web-vue/es/icon';
import { Modal } from '@arco-design/web-vue';
import PscgoDialog from './PscgoDialog.vue'
import { onMounted, ref, computed, reactive } from 'vue';
import { useUserStore } from '@/store.js';


const point = ref(0)
const showDialog = ref(false)
const userStore = useUserStore();

const user = computed(() => userStore.userInfo);
// const isLogin =  computed(() => user.value?.card_number & true);9I h hIhh
let noticeList = reactive([])

onMounted(() => {
    init()
    // 获取公告列表
    getNotice()
})

const init = async() => {
    if(user.value?.card_number) {
        try {
            const points = await window?.electron?.getPoints(user.value?.card_number);
            // const points =  await window?.electron?.getPoints('51A7D4BB313D7D96');
            point.value = points
        } catch (e) {
            console.log(e)
        }
    } else {
        // isLogin.value = false
    }
}

// 获取公告列表
const getNotice = async () => {
   const res = await window?.electron?.getNoticeList();
   noticeList = res
//    console.log(res)
}

// exe 最小化
const handleMini = async () => {
    await window?.electron?.miniWindow()
}
// exe 全屏
const handleFull = async () => {
    await window?.electron?.fullWindow()
}
// exe 关闭
const handleClose = async () => {
    // 这里需要二次确认弹框
    Modal.info({
        title: '确认关闭',
        content: '确认关闭么，当前可能还有任务正在执行？',
         onOk: async () =>  {
            try{
                // 用户点击确认按钮后执行的代码
                await window?.electron?.closeWindow()
                // 这里可以放置你需要执行的逻辑
            } catch(err) {
                console.log(err)
            }
        },
     });
   
}
// 开通链接
const handleGO = () => {
    window.open('https://www.baidu.com');
}

// 退出登录
const handleLogout = () => {
    localStorage.clear();
    userStore.logout();
}

const handleCloseModal = () => {
    showDialog.value = false
    init()
}
const handleLogin = () => {
    showDialog.value = true
}
</script>

<style scoped>

.header_content {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content:space-between;
    font-size: 16px;
    color: rgb(78, 89, 105);
}
.header_content_middle {
    -webkit-app-region: drag;
    width: 80%;
    height: 100%;
}

.header_icon {
    width: 24px;
    height: 24px;
}
.header_icon :hover {
    cursor: pointer;
}
.popover-content {
    padding: 10px;
}
.popover-content-header {
    display: flex;
    justify-content:space-between;
}

.popover-content-footer {
    cursor: pointer;
}
.header_content_left:hover{
  cursor: pointer;
}
.popover-content ul {
    list-style: none; /* 移除列表项前的默认符号 */
    padding: 0; /* 移除默认的内边距 */
    margin: 0; /* 移除默认的外边距 */
}
.popover-content ul li {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 左右布局，空间平均分配 */
    align-items: center; /* 垂直居中对齐 */
}
</style>